<template>
	<view class="uni_box home">
		<navbar title='储值'>
		</navbar>
		<view class="content">
			<view class="tione">
				<text class="tiname">储值金额</text>
				<view class="tishu">
					<u-input v-model="money" type="text" :border="false" placeholder="请输入储值金额"/>
					<text class="qian">¥</text>
					<!-- <text class="quanbu">全部</text> -->
				</view>
			</view>
			<view class="tibtn" @click="chongzhi">充值</view>
			<!-- <view class="ticontent">
				<u-parse :html="content" :tag-style="style"></u-parse>
			</view> -->
		</view>

		<!-- 支付t弹窗 -->
		<!-- 底部支付 -->
		<view class="qie">
			<u-popup v-model="zshow" mode="bottom" :closeable="false">
				<view class="qviews">
					<view class="qbiao">
						<text class="taotit">支付</text>
						<text class="rjia">¥{{ money }}</text>
					</view>
					<view class="zhilist">
						<view class="zhiitem" v-for="(item,index) in paylist" :key="index" :class="paytype.type == item.type ? 'zactive' : ''" @click="getzhipay(item)">
							<image class="zicon" :src="item.image?item.image:'/static/mine/zhifubao.png'" />
							<text class="ztit">{{item.name}}</text>
							<image class="gous" src="/static/mine/gous.png" />
							<image class="gou" src="/static/mine/gou.png" />
						</view>
					</view>
					<view class="zhibtn">
						<view class="zhileft" @click="zshow = false">取消</view>
						<view class="zhiright" @click="goumaibtn">确定</view>
					</view>
				</view>

			</u-popup>
		</view>

		<view style="display: none;width: 0;height: 0;" v-html="payForm"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				content:'①降低服务费、拿高奖励?可以用“金币”兑换升级。点击《去升级》了解吧正常到账时间24小时。严禁套现、机刷等违规作业。疑似异常账号和订单将会延迟48-72小时处理提现，恶意违规将会冻结账号!移送公安机关!②为了避免提现失败，提现前请检查姓名、身份证和银行卡是否信息一致!如因信息错误导致提现失败，请在工作日联系客服。团队长可直接咨询你的商务导师',
				style: {
						img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				zshow:false,
				paytype:'',
				paylist:[],
				payid:'',
				payForm:'',
				newpayinfo:{}
			}
		},
		onLoad() {
			this.getPayList()
		},
		onShow() {
		},
		methods: {
			async chongzhi(){
				if(!this.money){
					this.$u.toast("请输入金额");
					return false;
				}
				// addOrder
				
				this.zshow = true
			},
			async getPayList(){
				let method = 'wap'
				// #ifdef APP-PLUS
				method = 'app'
				// #endif
				let res = await this.$u.api.getPayList({
					mark:'recharge',
					method:method
				});
				this.paylist = res
				this.paytype = res[0]
			},
			getzhipay(item){
				this.paytype = item
			},
			async goumaibtn(){
				let res = await this.$u.api.addOrder({
					money:this.money
				});
				// this.$u.toast("操作成功");
				// this.money = ''
				this.payid = res.order_id
				if(this.paytype.type == 'wechat'){
					//微信
					this.getpay();
				}else if(this.paytype.type == 'alipay'){
					//支付宝
					this.getpayali();
				}else{
					this.$u.toast("暂未开通支付方式");
				}
				
			},
			async getpay(){
				let res = await this.$u.api.payWechat({
					id:this.payid
				});
				console.log(res)
				console.log(JSON.parse(res).appid)
				let data = JSON.parse(res)
				this.newpayinfo = data
				this.zhifu()
			},
			async getpayali(){
				let method = 'wap'
				// #ifdef APP-PLUS
				method = 'app'
				// #endif
				let res = await this.$u.api.payAlipay({
					id:this.payid,
					method:method
				});
				console.log(res)
				// console.log(JSON.parse(res).appid)
				// let data = JSON.parse(res)
				this.newpayinfo = res
				this.zhifu()
			},
			async zhifu() {
				// //去支付
				// let res = await this.$u.api.vippay({
				// 	type: this.paytype,
				// 	vip_id: this.vipid
				// });
				// console.log(res)
				// #ifdef H5
				// 将接口返回的form表单显示到页面
				if (this.paytype.type == 'alipay') {
					// this.zhishow = true
					console.log(this.newpayinfo)
					this.payForm = this.newpayinfo;
					this.$nextTick(() => {
					document.forms['alipay_submit'].submit();
					});
				} 
				// #endif

				// #ifdef APP-PLUS
				let payinfo = 'alipay'
				if (this.paytype.type == 'alipay') {
					payinfo = 'alipay'
				} else if (this.paytype.type == 'wechat') {
					payinfo = 'wxpay'
				}
				console.log(this.newpayinfo)
				console.log(payinfo)
				uni.requestPayment({ //拿到订单信息后 调用 uniapp的支付接口 唤起支付
					provider: payinfo, //微信就是 wxpay
					orderInfo: this.newpayinfo, //支付宝订单数据 从后端拿到的数据
					success: function (res) {
					uni.showToast({
						title: "支付成功",
						icon: 'success',
						success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 500)
						}
					})
					},
					fail: function (err) {
					uni.showToast({
						title: "支付失败请稍后再试",
						icon: 'none',
						success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 500)
						}
					})
					console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif

				},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx 30rpx;
		.tione{
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.tishu{
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				margin: 20rpx 0;
				align-items: center;
				.quanbu{
					display: inline-block;
					margin-left: 8rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #46B2F2;
					margin-left: 15rpx;
				}
				.qian{
					display: inline-block;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
			.timiao{
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 28rpx;
				color: #999999;
			}
		}
		.tiname{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #51565D;
			display: block;
		}
		.titwo{
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 30rpx 0;
			.tilist{
				display: flex;
				flex-direction: column;
				.tiitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 40rpx;
					.zhiicon{
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
					.tizhitit{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
					.zhigou{
						margin-left: auto;
						width: 48rpx;
						height: 48rpx;
					}
					.zhigous{
						margin-left: auto;
						width: 48rpx;
						height: 48rpx;
						display: none;
					}
					.bang{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #46B2F2;
						display: inline-block;
						margin-left: 14rpx;
					}

				}
				.tiitem:last-child{
					margin-bottom: 0;
				}
				.tactive{
					.zhigou{
						display: none;
					}
					.zhigous{
						display: inline-block;
					}
				}
			}
		}
		
		.tibtn{
			margin: 60rpx 30rpx 80rpx;
			height: 78rpx;
			background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
			border-radius: 39rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	
	.qie {
	/deep/.u-drawer-bottom {
		background-color: transparent;
	}

	.qielist {
		height: 90%;

		.qieitem {
			padding: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1rpx solid #EDEDED;
		}
	}
	.qviews {
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 0rpx;
	// #ifdef APP-PLUS
	padding-bottom: 150rpx;

	// #endif
	.qbiao {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 15rpx;
		// margin-left: 30rpx;
		padding: 0 30rpx;
		// width: 100%;
	}

	.taotit {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.rjia {
		margin-left: auto;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2A7CFC;
	}

	.zhilist {
		display: flex;
		flex-direction: column;

		.zhiitem {
			padding: 20rpx;
			border-bottom: 1rpx solid #EDEDED;
			display: flex;
			flex-direction: row;
			align-items: center;

			.zicon {
				width: 78rpx;
				height: 78rpx;
				margin-right: 13rpx;
			}

			.ztit {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.gous {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: none;
			}

			.gou {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: inline-block;
			}

		}

		.zactive {
			.gous {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: inline-block;
			}

			.gou {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: none;
			}
		}
	}

	.zhibtn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 30rpx;

		.zhileft {
			width: 206rpx;
			height: 72rpx;
			border: 1px solid #CFCFCF;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin: 0 20rpx;

		}

		.zhiright {
			width: 206rpx;
			height: 72rpx;
			// background: #2A7CFC;
			background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
			box-shadow: 2rpx 5rpx 9rpx 1rpx rgba(198, 174, 119, 0.2);
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 0 20rpx;
		}
	}
}
}
.zanwu{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 500rpx;
	text{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	image{
		width: 124rpx;
		height: 90rpx;
		margin-bottom: 30rpx;
	}
}

.txt {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

	
</style>
